<template>
  <view class="popup-box">
    <picker
      @change="bindPickerChange"
      @columnchange="columnchange"
      :range="array"
      range-key="name"
      :value="value"
      mode="multiSelector"
      style="display: flex; justify-content: space-between; font-size: 14px"
    >
      <slot></slot>
    </picker>
  </view>
</template>

<script>
import AllAddress from "@/utils/data1.js";
let selectVal = ["", "", ""];

export default {
  props: {
    show: {
      type: Boolean,
      default: () => false,
    },
    newselectVal: {
      type: Array,
      default: () => ["", "", ""],
    },
  },
  data() {
    return {
      value: [0, 0, 0],
      array: [],
      index: 0,
	  address:{
		  province:"",
		  provinceCode:"",
		  city:"",
		  cityCode:"",
		  area:"",
		  areaCode:""
	  }
    };
  },
  watch: {
    // newselectVal: {
    //   handler(v) {
    //     selectVal = v;
    //     console.log("sel", v);
    //     // this.initSelect();
    //   },
    //   immediate: true,
    //   deep: true,
    // },
  },
  created() {
    this.initSelect();
  },
  methods: {
    // 初始化地址选项
    initSelect() {
      this.updateSourceDate() // 更新源数据
        .updateAddressDate() // 更新结果数据
        .$forceUpdate(); // 触发双向绑定
		
		
		
    },
    // 地址控件改变控件
    columnchange(d) {
		console.log('列',d);
	  
	 
      this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
        .updateSourceDate() // 更新源数据
        .updateAddressDate() // 更新结果数据
        .$forceUpdate(); // 触发双向绑定
		// if(d.detail.column==0){//省
		// 		  this.address.provinceCode=this.array[0][d.detail.value].code;
		// 		  this.address.province=this.array[0][d.detail.value].name;
				  
		// }
		// if(d.detail.column==1){//市
		// 		  this.address.cityCode=this.array[1][d.detail.value].code;
		// 		  this.address.city=this.array[1][d.detail.value].name;
		// }
		// if(d.detail.column==2){//区县
		// 		this.address.areaCode=this.array[2][d.detail.value].code;  
		// 		this.address.area=this.array[2][d.detail.value].name; 
		// }
		
    },

    /**
     * 更新源数据
     * */
    updateSourceDate() {
      this.array = [];
      this.array[0] = AllAddress.map((obj) => {
        return {
          name: obj.name
        };
      });
      this.array[1] = AllAddress[this.value[0]].cityList.map((obj) => {
        return {
          name: obj.name
        };
      });
      this.array[2] = AllAddress[this.value[0]].cityList[
        this.value[1]
      ].areaList.map((obj) => {
        return {
          name: obj.name
        };
      });
	  //console.log("code",this.array[0])
      return this;
    },

    /**
     * 更新索引
     * */
    updateSelectIndex(column, value) {
      let arr = JSON.parse(JSON.stringify(this.value));
      arr[column] = value;
      if (column === 0) {
        arr[1] = 0;
        arr[2] = 0;
      }
      if (column === 1) {
        arr[2] = 0;
      }
      this.value = arr;
      return this;
    },

    /**
     * 更新结果数据
     * */
    updateAddressDate() {
      selectVal[0] = this.array[0][this.value[0]].name;
      selectVal[1] = this.array[1][this.value[1]].name;
      selectVal[2] = this.array[2][this.value[2]].name;
      return this;
    },

    /**
     * 点击确定
     * */
    bindPickerChange(e) {
		// console.log('地区',e)
		// console.log(this.address)
		let indexArr=e.detail.value;
	  this.address.provinceCode=AllAddress[indexArr[0]].code;
	  this.address.province=AllAddress[indexArr[0]].name;
	  this.address.city=AllAddress[indexArr[0]].cityList[indexArr[1]].name;
	  this.address.cityCode=AllAddress[indexArr[0]].cityList[indexArr[1]].code;
	  this.address.area=AllAddress[indexArr[0]].cityList[indexArr[1]].areaList[indexArr[2]].name;  
	  this.address.areaCode=AllAddress[indexArr[0]].cityList[indexArr[1]].areaList[indexArr[2]].code;
      this.$emit("change", {
        index: this.value,
        data: selectVal,
		address:this.address
      });
      return this;
    },
  },
};
</script>

<style lang="scss">
.popup-box {
}
</style>
